<template>
  <el-card>
    <el-table :data="tableData" border>
      <el-table-column type="index" label="#"></el-table-column>
      <el-table-column prop="userName" label="昵称"></el-table-column>
<!--      <el-table-column prop="phone" label="手机号"></el-table-column>-->
<!--      <el-table-column prop="price" label="价格"></el-table-column>-->
      <el-table-column prop="hairName" label="项目"></el-table-column>
      <el-table-column prop="barberName" label="教练"></el-table-column>
      <el-table-column prop="orderDate" sortable label="预约时间"></el-table-column>
      <el-table-column prop="orderStatus" label="预约状态">
        <template slot-scope="scope">
          <el-tag type="primary" v-show="scope.row.orderStatus==0?true:false">待确定</el-tag>
          <el-tag type="success" v-show="scope.row.orderStatus==1?true:false">预约成功</el-tag>
          <el-tag type="danger" v-show="scope.row.orderStatus==2?true:false">预约失败</el-tag>
        </template>

      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
<!--          <el-button type="success" size="mini" round-->
<!--                     @click="okClick(scope.row)">查看-->
<!--          </el-button>-->
<!--          <el-button type="danger" size="mini" round-->
<!--                     v-show="scope.row.orderStatus==1||scope.row.orderStatus==2?true:false"  @click="cancelClick(scope.row)">删除-->
<!--          </el-button>-->
          <el-popconfirm
              confirm-button-text='好的'
              cancel-button-text='不用了'
              icon="el-icon-info"
              @confirm="cancelClick(scope.row)"
              icon-color="red"
              title="这是一段内容确定删除吗？"
          >
            <el-button type="danger" size="mini" round v-show="scope.row.orderStatus==1||scope.row.orderStatus==2?true:false" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  name: "userOrder",
  data(){
    return{
      tableData: [],
      userId:this.$store.getters.get_user.id,
    }
  },
  mounted() {
    this.getData();
  },
  methods:{
    async getData(){
    const res=  await this.$axios.get('/api/order/userAll/'+this.userId);
    this.tableData=res.data.content
      // console.log(res)
    },
    async cancelClick(e){
      console.log(e.orderId)
      const res=  await this.$axios.get('/api/order/userAll/'+this.userId);
      console.log(res)
    }

  }
}
</script>

<style scoped>

</style>